<template>
	<view style="min-height: 100vh;position: relative;background-color: #f2f2f2;">
		<u-navbar title='线下考评' left-icon-color="white" :autoBack="true" :titleStyle="{'color':'white'}"
			bgColor="#13989a" :placeholder="true"></u-navbar>
		<view class="container">
			<view class="workerSearch" style="">
				<image style="width: 34rpx;height: 34rpx;"
					src="https://renovationcdn.jiachuangnet.com/index/workerIndex/search.png"></image>
				<u-input @change='blurSearch' placeholder="请输入您想搜索的店铺名称" style="height: 78rpx;"
					v-model="storeName"></u-input>
			</view>
			<!-- <view @click='map' class="floor">
				<view class="flex alignItem bewteen" style="flex-direction: row;justify-content: space-between;">
					<view class="flex" style="flex-direction: column;width: 500rpx;">
						<view class="label" style="width:200rpx">附近门店</view>
						<view class="val" style="display:flex;align-items:center;justify-content: flex-start;overflow: hidden;">
							<text style="
									word-break:keep-all;
									white-space:nowrap;
									overflow:hidden;
									text-overflow:ellipsis;"
							>{{info.storeAddress}}</text>
						</view>
					</view>
					<view class="flex" style="justify-content: center;align-items: center;width: 150rpx;">
						<text style="font-size: 24rpx;">手动定位</text>
						<u-icon name="map" size="24" color='#c7ccd3'></u-icon>
					</view>
				</view>
			</view> -->
			<view class="floor" @click="toPathC(v.assignTaskId)" v-for="(v,i) in patrolStoreVoList" :key="i">
				<view>
					<view class="title" style="display: flex;justify-content: space-between;align-items: center;">
						<text>{{v.assignName}}</text>
						<u-icon name="arrow-right" size="16"></u-icon>
					</view>
					<view class="adress flex" style="justify-content: space-between;margin: 20rpx 0;">
						<text style="
								width: 500rpx;
								word-break:keep-all;
								white-space:nowrap;
								overflow:hidden;
								text-overflow:ellipsis;">{{v.address}}</text>
						<text>{{getDistances(v.lat,v.lon).km}}km</text>
					</view>
				</view>
				<view style="display: flex;justify-content: space-between;align-items: center;font-size: 20rpx">
					<view :style="{'color':color}">
						{{v.storeStaffName || '暂无店长'}}
					</view>
					<view @click.stop="telCall(v.storeStaffName)" style="display: flex;justify-content: space-between;align-items: center;">
						<text>{{v.storeStaffPhone || '暂无电话'}}</text>
						<u-icon v-if="v.storeStaffName" name="phone" :color="color"
							></u-icon>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let app = getApp();
	export default {
		data() {
			return {
				color: app.globalData.defaultColor,
				info: {
					lat: 0,
					lon: 0,
					storeAddress: ''
				},
				longitude: 0,
				latitude: 0,
				patrolStoreVoList: [],
				storeName: '',
				patrolType: 0
			}
		},
		onLoad(option) {
			this.patrolType = option.patrolType
		},
		onShow() {
			this.getPatrolStoreVo()
			uni.getLocation({
				type: 'gcj02', // 坐标类型，默认为wgs84，可选的值为gcj02和bd09ll
				geocode: true,
				altitude: true,
				isHighAccuracy: true,
				success: res => {
					this.longitude = res.longitude
					this.latitude = res.latitude

				},
				fail: err => {
					// 获取失败，err为错误信息
					console.log('getLocation err:', err);
				}
			});
		},
		methods: {
			telCall(tel) {
				uni.makePhoneCall({
					phoneNumber: tel,
					success: (res) => {

					}
				})
			},
			getPatrolStoreVo() {
				uni.$u.http.post('/patrol/getPatrolStoreVo', {
					pageNumber: 1,
					pageSize: 1000,
					storeName: this.storeName
				}).then(res => {
					this.patrolStoreVoList = res.data
				})
			},
			// 根据经纬度计算距离，参数分别为第一点的纬度，经度；第二点的纬度，经度
			getDistances(lat2, lng2) {
				console.log(this.latitude, this.longitude)
				if (this.latitude && this.longitude) {
					let EARTH_RADIUS = 6378.137; // 地球半径
					let radLat1 = this.latitude * Math.PI / 180.0; //lat1 * Math.PI / 180.0=>弧度计算
					let radLat2 = lat2 * Math.PI / 180.0;
					let a = radLat1 - radLat2;
					let b = this.longitude * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
					let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) *
						Math.pow(Math.sin(b / 2), 2)));
					s = s * EARTH_RADIUS;
					s = Math.round(s * 10000) / 10000; // 输出为公里
					return {
						m: s * 1000,
						km: Number(s.toFixed(2))
					}
				} else {
					return {
						m: 0,
						km: 0
					}
				}

			},
			toPathC(assignTaskId) {
				uni.navigateTo({
					url: `/packageC/pages/oLineAssessment/onlineAssessment?assignTaskId=${assignTaskId}&patrolType=${this.patrolType}`
				})
			},
			map() {
				uni.chooseLocation({
					type: 'gcj02',
					success: (res) => {
						console.log(res)
						this.info.lat = res.latitude;
						this.info.lon = res.longitude;
						this.info.storeAddress = res.address;
					},
					fail: (res) => {
						this.info.lat = res.latitude;
						this.info.lon = res.longitude;
						this.info.storeAddress = res.address;
					}
				})
			},
			blurSearch() {
				this.getPatrolStoreVo()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 92vw;
		padding: 30rpx;
		z-index: 10;
		position: absolute;
		top: 160rpx;
		overflow: hidden;
		border-radius: 20rpx;
	}

	.workerSearch {
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		padding-left: 22rpx;
		width: 100%rpx;
		height: 60rpx;
		background-color: #e6e6e6;
		opacity: 0.9;
		margin: 10rpx 0;
	}

	.floor {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;

		.adress {
			font-size: 26rpx;
		}

		.title {
			font-weight: 600;
			font-size: 30rpx;
		}
	}
</style>